<template>
  <view>
   <!-- 搜索输入框 -->
   <view class="search-container">
     <uni-search-bar  @input="input" cancelButton="none" radius="20" bgColor="#fff" focus="true"></uni-search-bar>
   </view>
   <!-- 关键词搜索结果 -->
   <view class="search-result" v-if="searchResult.length > 0">
     <view class="result-item" v-for="(item, i) in searchResult" :key="i">
       <text class="result-item-name">{{item.goods_name}}</text>
       <uni-icons type="arrowright"></uni-icons>
     </view>
   </view>
   <!-- 搜索历史 -->
   <view v-else class="search-history">
     <view class="search-clear">
       <text>搜索历史</text>
       <uni-icons size="24" type="trash" @click="searchKeys = []"></uni-icons>
     </view> 
     <view class="search-key">
       <uni-tag class="search-key-item" v-for="(item , i) in searchKeys" :key="i" @click="gotoGoodsList(item)" :text="item"></uni-tag>
     </view>
   </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        timeId:null,
        kw:'',//搜索关键词
        searchResult:[], //关键词搜索结果
        searchKeys:[], //用户搜索历史
      };
    },
    onLoad() {
			//从本地存储取出历史搜索记录
      this.searchKeys = JSON.parse(uni.getStorageSync('kw') || '[]')
    },
    methods:{
      //搜索历史点击跳转列表页
      gotoGoodsList(item) {
        uni.navigateTo({
          url:`/subpkg/goods_list/goods_list?query=` + item
        })
      },
      //获取关键词结果
      async getSearchResult() {
        const {data: res} = await uni.$http.get('/goods/qsearch',{query: this.kw})
        console.log('关键词结果',res)
        if (res.meta.status !== 200) return uni.$showMsg()
        this.searchResult = res.message
      },
      // 保存搜索历史
      saveHistory() {
        const index = this.searchKeys.indexOf(this.kw)
        if (index !== -1) {
          this.searchKeys.splice(index, 1)
        }
        this.searchKeys.unshift(this.kw)
				uni.setStorageSync('kw',JSON.stringify(this.searchKeys))
      },
      // 输入框input事件
      input(value) {
        clearTimeout(this.timeId)
        this.timeId = setTimeout(() => {
        console.log(value)
        if (!value.trim()) {
          this.searchResult = []
          return
        }
          this.kw = value
          this.getSearchResult()
          this.saveHistory()
        },1000)
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #fff;
  }
.search-container {
  background-color: #c00000;
  position: sticky;
  top: 0;
}
.search-result{

  .result-item {
    display: flex;
    justify-content: space-between;
    height: 80rpx;
    align-items: center;
    border-bottom: 1px solid #efefef;
    margin: 0 16rpx;
    .result-item-name{
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 24rpx;
    }
  }
}

.search-history {
  .search-clear {
    height: 80rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16rpx;
    border-bottom: 1rpx solid #efefef;
  }
  .search-key {
    height: 80rpx;
    display: flex;
    align-items: center;
    .search-key-item {
      margin: 0 16rpx;
      background-color: #999;
    }
  }
}
</style>
